<template>
    <section class="app-container">
      <div class="app-container__header">
        <el-tabs class="fun-tabs" v-model="headerTabName" @tab-click="onTabClick">
          <el-tab-pane label="店铺搭建" name="TemplateBuild"></el-tab-pane>
          <el-tab-pane label="店铺配置" name="PublishingDetail"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="app-container__body is-has-header clearfix">
        <div class="leftside">
          <div :class="['title','blue',{'outline':activeModule == 'title'}]" @click="onModuleEdit('title',10)">
            {{resp.publishing.name}}
          </div>
          <div :class="['banner','blue',{'outline':activeModule == 'banner'}]" @click="onModuleEdit('banner',120)">
            <el-carousel :interval="4000" height="138px" indicator-position="none">
              <el-carousel-item v-for="(banner,bIndex) in resp.bannerList" :key="bIndex" v-if="banner.deleted == 'UN_DELETED'">
                	<img :src="banner.imageUrl" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <ul :class="['category','blue',{'outline':activeModule == 'category'}]" @click="onModuleEdit('category',280)">
            <li v-for="(category,cIndex) in resp.categoryList" :key="cIndex" v-if="cIndex<4 && category.deleted == 'UN_DELETED'">
              <img v-if="category.imageUrl" :src="category.imageUrl" width="65" height="65" />
              <span class="c-title">{{category.name}}</span>
            </li>
          </ul>
          <div :class="['box',{'outline':activeModule == 'block'}]" v-for="(block,blockIndex) in resp.blockList" :key="blockIndex" @click="onModuleEdit('block',380,blockIndex)">
            <div class="tit">
              {{block.title}}
            </div>
            <ul class="list">
              <li v-for="(blockBook,bIndex) in block.blockBookList" :key="bIndex" v-if="blockBook.deleted == 'UN_DELETED'">
                <div class="img">
                  <img :src="blockBook.book.cover" />
                </div>
                <div class="list_r">
                  <h3>{{blockBook.book.title}}</h3>
                  <p>{{blockBook.book.recommendation}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="rightside">
          <div :class="['edit-dialog',{'is-category':activeModule == 'category'}]" v-if="activeModule != ''" :style="{'margin-top':mTop+'px'}">
            <div class="edit_dialog__body">
              <publishing-name v-if="activeModule =='title'" :publishing.sync="resp.publishing"></publishing-name>
              <banner :templateId="templateId" v-if="activeModule == 'banner'" :banners.sync="resp.bannerList"></banner>
              <category-list v-if="activeModule == 'category'" :categorys.sync="resp.categoryList"></category-list>
              <block v-if="activeModule =='block'" :templateId="templateId" :block.sync="resp.blockList[resp.blockIndex]"></block>
            </div>
          </div>
        </div>
      </div>
      <el-footer>
        <el-button type="cyan" @click="onSave"> 保 存 </el-button>
      </el-footer>
    </section>
</template>

<script>
  import { PublishingName,Banner,CategoryList,Block} from "./components";
  import {getTemplateContent,saveTemplateContent} from "../../api/publish";
  import MTemplate from "../../model/Template";

  export default {
    components:{
      PublishingName,Banner,CategoryList,Block
    },
    data(){
        return{
          templateId:null,
          headerTabName:'TemplateBuild',
          activeModule:'',//模块点击响应
          raw:{},
          resp:this.baseUtil.modelCopy(MTemplate),
          mTop:10,
        }
    },
    watch:{
    },
    methods:{
      onTabClick(tab){
        if(tab.name == 'PublishingDetail'){
          this.$router.push({ name:'PublishingDetail'})
        }
      },
      onModuleEdit(m,top,blockIndex) {
        this.resp.blockIndex = blockIndex;
        this.activeModule = m;
        this.mTop = top;
      },
      async loadData(){
        let resp = await getTemplateContent({templateId:this.templateId});
        console.log("ok==>",resp);
        if(this.qUtil.validResp(resp)){
          this.raw  = this.baseUtil.modelCopy(resp.data);
          this.raw.blockIndex = -1;
          this.resp = this.baseUtil.modelCopy(this.raw)
          if(this.resp.blockList.length ==0) this.resp.blockList = MTemplate.blockList;
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
      async onSave(){
        let data = this.baseUtil.modelCopy(this.resp);
        data.templateId = this.templateId;
        let resp = await saveTemplateContent(data);
        if(this.qUtil.validResp(resp)){
          this.$alert("保存成功!","提示",{ callback: action => {
              location.reload();
            }})
        }else this.$message({ message: resp.msg, type: 'warning' });
      }
    },
    mounted(){
      this.templateId = this.$route.query.id || null;
      if(this.baseUtil.isBlank(this.templateId)){
        this.$alert("加载模板失败","提示",{ callback: action => {
            this.$router.push({name:"TemplateSelect"})
          }})
        return;
      }
      this.loadData();
    }
  }
</script>
<style scoped>
	.leftside{
		width: 400px;
		height: 821px;
		overflow: hidden;
		background: url(../../assets/images/indexbg.jpg) no-repeat center top;
		background-size:cover;
		border: 1px #dddddd solid;
		color: #333;
		font-size: 14px;
		text-align: center;
		float: left;
	}
	.leftside .title{
		width: 100%;
		height: 45px;
		line-height:45px;
		text-align: center;
		font-size: 18px;
		margin-top: 25px;
		cursor: pointer;
	}
	.leftside .banner{
		width: 100%;
		height: 138px;
		overflow: hidden;
		margin: 70px auto 10px auto;
		font-size: 24px;
		cursor: pointer;
		border-radius: 5px;
	}
	.leftside .banner .el-carousel{
		width: 345px;
		height: 138px;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 5px;
	}
	.leftside .banner img{
		width: 100%;
		height: 100%;
	}
	.leftside .category{
		list-style: none;
		margin:0;
		padding: 6px 0 0 6px;
		height: 78px;
		overflow: hidden;
		cursor: pointer;
	}
	.leftside .category li{
    	position: relative;
		float: left;
		width: 65px;
		height: 65px;
    	margin-left: 10px;
		overflow:hidden;
		background: #000;
		border-radius: 5px;
	}
  .leftside .category li .c-title{
	    position: absolute;
	    left:0;
	    top:0;
	    z-index: 10;
	    display: block;
	    width:100%;
	    line-height: 65px;
	    text-align: center;
	    font-size: 14px;
	    color: #fff;
	}
  .leftside .category li img{
	  	width:100%;
	  	display: block;
	  	opacity: 0.6;
	}
	.leftside .box{
		height: auto;
		overflow: hidden;
		margin:17px 0;
	}
	.leftside .box .tit{
		font-size: 18px;
		text-align: left;
		padding:15px 0 0 20px;
		height: 60px;
		line-height: 50px;
		font-weight: bold;
		cursor: pointer;
	}
	.leftside .list{
		list-style: none;
		padding:10px 16px 0 16px;
		cursor: pointer;
		margin:0;
    	background-color: #fff;
    	height:318px;
	}
	.leftside .list li{
		height: auto;
		overflow: hidden;
		margin-bottom:20px;
	}
	.leftside .list li .img{
		width:95px;
		height: 135px;
		line-height: 138px;
		overflow: hidden;
		float: left;
		background: #d3ece8;
	}
	.leftside .list li .img img{
		width: 100%;
		height: 100%;
		display: block;

	}
	.leftside .list li .list_r{
		margin-left:110px;
		height: auto;
		overflow: hidden;
		text-align: left;
	}
	.leftside .list li .list_r h3{
		font-size:16px;
		margin: 5px 0 0 0;
		padding: 0;
	}
	.leftside .list li .list_r p{
		font-size: 14px;
		line-height:1.5;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.leftside .blue{
		color: rgb(64, 158, 255);
	}
	.leftside .outline{
		border: 1px #2bb89a dashed;
	}
  .leftside .title:hover,.leftside .banner:hover,.leftside .category:hover,.leftside .box:hover{
    border: 1px #2bb89a dashed;
  }
	.rightside{
		margin-left: 420px;
	}
  .edit-dialog{
    margin-left:20px;
    width:542px;
    border:1px solid #E0E0E0;
    border-radius:10px;
  }
  .edit-dialog.is-category{
    width:320px;
  }
  .edit-dialog .edit_dialog__body{
    padding:20px;
  }
</style>
